// 获取地址栏的id值
let id = location.search.substring(4);

// ------------------------------------------- 添加前的页面处理 ---------------------------------------
// ///// 1、初始化富文本编辑器
initEditor();

// ///// 2、获取所有的分类，渲染到下拉框的位置
$.ajax({
  url: '/my/category/list',
  success: function (res) {
    if (res.status === 0) {
      let str = '';
      res.data.forEach(item => {
        str += `<option value="${item.id}">${item.name}</option>`;
      });
      $('select').html(str);
      // 更新渲染
      let form = layui.form;
      form.render();
      // --------- 保证下拉框有值，然后再数据回填 ---------
      $.ajax({
        url: '/my/article/' + id,
        success: function (res) {
          if (res.status === 0) {
            console.log(res.data);
            let form = layui.form;
            form.val('edit', res.data); // 数据回填
            // 更换剪裁区的图片
            image.cropper('replace', baseURL + '/' + res.data.cover_img);
          }
        }
      });
    }
  }
});

// ///// 3、处理封面
// 3.1） 初始化 --> 得到一个剪裁框
let image = $('#image');
let option = {
  // 约束剪裁比例为 400/280
  aspectRatio: 400 / 280,
  // 指定预览区域
  preview: '.img-preview',
  // 让剪裁框最大
  autoCropArea: 1
};
image.cropper(option);

// 3.2） 点击 选择封面 按钮，触发文件域的单击事件
$('button:contains("选择封面")').on('click', function () {
  // 触发文件域的单击事件
  // $('#file').trigger('事件名');
  $('#file').trigger('click');
});

// 3.3） 文件夹改变，更换剪裁区的图片
$('#file').on('change', function () {
  if (this.files.length > 0) {
    // 获取文件对象
    let fileObj = this.files[0];
    // 创建url
    let url = URL.createObjectURL(fileObj);
    // 更换剪裁区的图片
    image.cropper('replace', url);
  }
})


// -------------------------------------- 修改文章 -----------------------------
// 表单提交 --> 阻止默认行为 --> 收集数据 --> Ajax提交
$('form').on('submit', function (e) {
  e.preventDefault();
  // 使用FormData收集表单数据
  let fd = new FormData(this); // 目前，title、cate_id、state都正常
  // content没有值，所以要重新设置content的值
  fd.set('content', tinyMCE.activeEditor.getContent());
  // 剪裁图片
  let canvas = image.cropper('getCroppedCanvas', { width: 400, height: 280 });
  canvas.toBlob(function (blob) {
    fd.append('cover_img', blob);

    fd.append('id', id);
    // 检查fd中有哪些数据，只能通过forEach遍历
    // fd.forEach((value, key) => console.log(key, value));

    // ajax提交
    $.ajax({
      type: 'POST',
      url: '/my/article/update',
      data: fd,
      processData: false,
      contentType: false,
      success: function (res) {
        layer.msg(res.message);
        if (res.status === 0) {
          // 修改成功，跳转到文章列表页
          location.href = './list.html';
        }
      }
    });
  });
});